<template>
  <el-scrollbar wrap-class="scrollbar-wrapper">
    <div class="dashboard">
      <!--数据面板-->
      <el-row :gutter="24">
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>GMV</h3>
              <p class="date">2018-11-05至2018-11-05 | 今日</p>
            </div>
            <div class="grid-content-container">
              <p>今日</p>
              <h1>￥198,56<small>万</small></h1>
              <div class="ratio">
                环比<span class="red">39.19%</span><i class="el-icon-caret-bottom red"></i>
                同比<span class="green">32.68%</span><i class="el-icon-caret-top green"></i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>订单总数</h3>
              <p class="date">2018-11-05至2018-11-05 | 今日</p>
            </div>
            <div class="grid-content-container">
              <p>今日</p>
              <h1>1,843<small>单</small></h1>
              <div class="ratio">
                环比<span class="red">11.23%</span><i class="el-icon-caret-bottom red"></i>
                同比<span class="green">12.68%</span><i class="el-icon-caret-top green"></i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>待发货订单</h3>
              <p class="date">2018-11-05至2018-11-05 | 今日</p>
            </div>
            <div class="grid-content-container">
              <p>今日</p>
              <h1>202<small>单</small></h1>
              <div class="ratio">
                环比<span class="red">39.19%</span><i class="el-icon-caret-bottom red"></i>
                同比<span class="green">32.68%</span><i class="el-icon-caret-top green"></i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>待退货订单</h3>
              <p class="date">2018-11-05至2018-11-05 | 今日</p>
            </div>
            <div class="grid-content-container">
              <p>今日</p>
              <h1>29<small>单</small></h1>
              <div class="ratio">
                环比<span class="red">39.19%</span><i class="el-icon-caret-bottom red"></i>
                同比<span class="green">32.68%</span><i class="el-icon-caret-top green"></i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>客单价</h3>
              <p class="date">2018-11-05至2018-11-05 | 今日</p>
            </div>
            <div class="grid-content-container">
              <p>今日</p>
              <h1>￥2,601<small>元</small></h1>
              <div class="ratio">
                环比<span class="red">39.19%</span><i class="el-icon-caret-bottom red"></i>
                同比<span class="green">32.68%</span><i class="el-icon-caret-top green"></i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>累计用户数</h3>
              <p class="date">2018-11-05至2018-11-05 | 今日</p>
            </div>
            <div class="grid-content-container">
              <p>合计</p>
              <h1>10.67<small>万人</small></h1>
              <div class="ratio">
                环比<span class="red">39.19%</span><i class="el-icon-caret-bottom red"></i>
                同比<span class="green">32.68%</span><i class="el-icon-caret-top green"></i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>全站日活用户</h3>
              <p class="date">2018-11-05至2018-11-05 | 今日</p>
            </div>
            <div class="grid-content-container">
              <p>今日</p>
              <h1>2,090<small>人</small></h1>
              <div class="ratio">
                环比<span class="red">39.19%</span><i class="el-icon-caret-bottom red"></i>
                同比<span class="green">32.68%</span><i class="el-icon-caret-top green"></i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>全站新用户数</h3>
              <p class="date">2018-11-05至2018-11-05 | 今日</p>
            </div>
            <div class="grid-content-container">
              <p>今日</p>
              <h1>2,034<small>万</small></h1>
              <div class="ratio">
                环比<span class="red">39.19%</span><i class="el-icon-caret-bottom red"></i>
                同比<span class="green">32.68%</span><i class="el-icon-caret-top green"></i>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!--30天变化趋势-->
      <el-row :gutter="24">
        <el-col :span="24">
          <div class="grid-content changingTrend">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>GMV近30天变化趋势</h3>
              <p class="date">2018-10-29至2018-11-04 | 过去 7 天</p>
            </div>
            <div class="grid-content-container">
              <el-row>
                <el-col :span="3">
                  <p>今日</p>
                  <h1>￥142<small>万</small></h1>
                  <div class="ratio">
                    <p>环比<span class="red">39.19%</span><i class="el-icon-caret-bottom red"></i></p>
                    <p>同比<span class="green">32.68%</span><i class="el-icon-caret-top green"></i></p>
                  </div>
                  <div class="total">
                    <p>合计 <span>972.86</span> 万</p>
                    <p>均值 <span>138.98</span> 万</p>
                  </div>
                </el-col>
                <el-col :span="20" :offset="1" class="chart-container">
                  <linechart height="100%" width="100%" />
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>

      <!--图表展示-->
      <el-row :gutter="24" class="homeChart">
        <el-col :span="12">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>商品分布</h3>
              <p class="date">2018-10-29至2018-11-04 | 过去 7 天</p>
            </div>
            <div class="grid-content-container">
              <piechart1 height="100%" width="100%" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>下单金额分布</h3>
              <p class="date">2018-10-29至2018-11-04 | 过去 7 天</p>
            </div>
            <div class="grid-content-container">
              <piechart2 height="100%" width="100%" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>购买转化漏斗</h3>
              <p class="date">2018-10-29至2018-11-04 | 过去 7 天</p>
            </div>
            <div class="grid-content-container">
              <funnel height="100%" width="100%" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content">
            <div class="grid-content-title">
              <svg-icon class-name="info-icon" icon-class="info" />
              <h3>购买频次分布</h3>
              <p class="date">2018-10-06至2018-11-04 | 过去 30 天</p>
            </div>
            <div class="grid-content-container">
              <bar height="100%" width="100%" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>

</template>

<script type="text/ecmascript-6">
import linechart from 'components/Charts/line'
import piechart1 from 'components/Charts/pie1'
import piechart2 from 'components/Charts/pie2'
import funnel from 'components/Charts/funnel'
import bar from 'components/Charts/bar'

export default {
  name: 'LineChart',
  components: { linechart, piechart1, piechart2, funnel, bar }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-scrollbar {
   height: 100%;
  .dashboard {
    padding: 24px;
    height: 100%;
    .grid-content {
      padding: 22px 24px 15px 24px;
      margin-bottom: 24px;
      height: 170px;
      background-color: #fff;
      border-radius: 2px;
      transition: all 0.3s ease;
      &:hover { box-shadow: 0px 1px 15px rgba(0, 21, 41, 0.2) }
      .grid-content-title {
        position: relative;
        h3 {
          margin: 0 0 8px 0;
          font-size: 14px;
          line-height: 14px;
          color: rgba(0, 0, 0, 0.7);
          font-weight: normal;
        }
        p{
          margin: 0;
          font-size: 12px;
          line-height: 12px;
          color: rgba(0, 0, 0, 0.6);
          &.date {
            margin-bottom: 18px;
          }
        }
        .info-icon {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .grid-content-container {
        height: calc(100% - 54px);
        .el-row { height: 100%; }
        h1 {
          margin: 15px 0 10px -2px;
          font-size: 30px;
          font-family: Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
          line-height: 30px;
          font-weight: normal;
          color: rgba(0, 0, 0, 0.85);
          small {
            padding-left: 8px;
            font-size: 14px;
            line-height: 14px;
            color: rgba(0, 0, 0, 0.65);
          }
        }
        p {
          margin: 0;
          font-size: 13px;
          color: rgba(0, 0, 0, 0.6);
        }
        .ratio {
          margin: 0;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.6);
          p {
            line-height: 12px;
            margin-bottom: 8px;
          }
          span {
            padding: 0 6px 0 10px;
            &.red {
              color: #fc6772;
            }
            &.green {
              color: #2dca93
            }
          }
          i {
            margin-right: 15px;
            font-size: 12px;
            &.red {
              color: #fc6772;
            }
            &.green {
              color: #2dca93
            }
          }
        }
        .total {
          margin-top: 30px;
          padding-top: 30px;
          border-top: 1px solid #e9f0f7;
          p {
            margin-bottom: 10px;
            font-size: 12px;
            line-height: 12px;
            color: rgba(0, 0, 0, 0.65);
            span {
              padding: 0 5px;
              font-size: 16px;
              color: rgba(0, 0, 0, 0.8)
            }
          }
        }
        .chart-container {
          height: 100%;
        }
      }
      .info-icon {
        font-size: 14px;
        line-height: 14px;
        fill: rgba(0, 0, 0, 0.35);
        cursor: pointer;
        vertical-align: middle;
      }
    }
    .changingTrend {
      height: 370px;
    }
    .homeChart {
      .grid-content {
        height: 350px;
      }
    }

  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
  .el-scrollbar {
    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }
  }
</style>
